<template>
  <div id="index">

  <div class="hd">
      <Router-link to="/Daka">
        <div class="ipt">

            <input type="search" placeholder="打卡" />

        </div>
      
      <div class="sousuob">
        <img src="@/assets/images/sousuo.png">
      </div>
      </Router-link>
    </div>
    <!-- 轮播 -->
    <div>
        <div class="swiper-container">
          <!-- v-if="swipers_one.length>0" -->
          <div class="swiper-wrapper"  v-if="swipers_one.length">
            <div class="swiper-slide" v-for="(val,index) in swipers_one" :key="index">
            <div class="lunhd"><img src="../assets/images/headerbeijingtu.png"></div>
            <div class="lunhde"><img :src="val.lbUrl"></div>
            </div>
            <!-- <div class="swiper-slide">
              <div class="lunhd"><img src="../assets/images/headerblue.png"></div>
              <div class="lunhde"><img :src="val.lbUrl"></div>
              </div> -->
            <!-- <div class="swiper-slide">
              <div class="lunhd"><img src="../assets/images/headersblue.png"></div>
              <div class="lunhde"><img src="../assets/images/lunbo2.png"></div>
              </div>
            <div class="swiper-slide">
            <div class="lunhd"><img src="../assets/images/headerbeijingtu.png"></div>
            <div class="lunhde"><img src="../assets/images/lunbo3.png"></div>
            </div> -->


          </div>
          <div class="swiper-pagination"></div>
        </div>
<!-- 
<div class="ui-swiper-demo">
  <div v-swipe class="ui-swiper-container">
    <div class="ui-swiper">
      <div class="ui-swiper-box" v-for="(item,index) in swipers" :key="index">
       
        <img class="ui-swiper-filter" :data-src="item.lbUrl" alt="">
      </div>
    </div>
  </div>
</div> -->
      <router-link to="/Gonggao">
        <Gonggao/>
      </router-link>
    </div>
    <!-- 列表 -->
    <section v-for="(val, index) in shop" :key="index">
      <section class="yd">
        <div class="fristList">
          <div class="fborder"></div><h1 class="h1">{{val.menuName}}</h1>
        </div>
      </section>
      <section class="liebiao">
        <div class="ziliebiao" v-for="(val, indx) in val.arrs" :key="indx">
          <a :href="val.menuButtonUrl">
            <img :src="val.menuButtonIcon">
            <span>{{val.menuButtonName}}</span>
          </a>
        </div>
      </section>
    </section>
    
    
    <!-- <section class="yd">
      <h1 class="h1 hk1">移动商店</h1>
    </section>
    <section class="liebiao">
      <div class="ziliebiao">
        <a href=" http://wf.r3yun.com:8086/store/#/appDetail?appIndex=1">
          <img src="@/assets/images/weixin.png">
          <span>微信</span>
        </a>
      </div>
      <div class="ziliebiao">
        <a href="http://wf.r3yun.com:8086/store/#/appDetail?appIndex=0">
          <img src="@/assets/images/Ulysses.png">
          <span>Ulysses</span>
        </a>
      </div>
      <div class="ziliebiao">
        <a href="http://wf.r3yun.com:8086/store/#/appDetail?appIndex=7">
          <img src="@/assets/images/WPS Office.png">
          <span>WPS Office</span>
        </a>
      </div>
      <div class="ziliebiao">
        <a href="http://wf.r3yun.com:8086/store/#/">
          <img src="@/assets/images/gengduo.png">
          <span>更多</span>
        </a>
      </div>
    </section> -->
   
   
    <!-- <section class="yd">
      <h1 class="h1">员工服务</h1>
    </section>
    <section class="liebiao">
      <div class="ziliebiao">
        <a href="http://m.spacechina.com/">
          <img src="@/assets/images/jituan.png">
          <span>集团官网</span>
        </a>
      </div>
      <div class="ziliebiao">
        <a
          href=" https://z.cbndata.com/2019-nCoV/index.html?from=timeline&isappinstalled=0&timestamp=1586935059550"
        >
          <img src="@/assets/images/zhoubianyiqing.png">
          <span>周边疫情</span>
        </a>
      </div>
      <div class="ziliebiao">
        <a
          href="https://widget-page.heweather.net/h5/index.html?bg=1&md=0123456&lc=auto&key=644b1daaee734429836fe807c6a926c3"
        >
          <img src="@/assets/images/tq.png">
          <span>天气预报</span>
        </a>
      </div>
      <div class="ziliebiao">
        <a href="http://m.people.cn/">
          <img src="@/assets/images/renminwang.png">
          <span>人民网</span>
        </a>
      </div>
      <div class="ziliebiao">
        <a href=" http://www.htzhiyun.cn:10372">
          <img src="@/assets/images/hangtian.png">
          <span>健康助手</span>
        </a>
      </div>
      <div class="ziliebiao">
        <a href="https://open.gongyi.qq.com/">
          <img src="@/assets/images/aixin.png">
          <span>爱心捐赠</span>
        </a>
      </div>
      <div class="ziliebiao">
        <img src="@/assets/images/jianhaogenduo.png">
        <span>添加</span>
      </div>
    </section>
  -->

    <!-- <Router-link to="/Nav"> -->
    <!-- 新闻 -->
    <div class="xxww">
      <section class="yd">
        <h1 class="hh1">新闻资讯</h1>
      </section>
      <div v-for="(v,i) in this.xinwen" :key="i">
      <!-- <a :href="v.newsUrl"> -->
        <router-link to="/Nav">
        <div class="xinwen">
          <img
            :src="v.newsImg"
            class="xw_img"
            alt=""
          >
          <div class="xw-item">
            <h2 class="xw_h2">{{v.newsTitle}}</h2>
            <p>
              <span class="xw_p">{{v.createTime.split(' ')[0]}}</span>
              <span class="xw_p2">来源：{{v.newsSource}}</span>
            </p>
          </div>
        
        </div>
        <!-- <section class="xw"></section> -->
      <!-- </a>  -->
      </router-link>
</div>




    </div>
    <!-- </Router-link> -->
    <!-- <div style="height:1rem">111</div> -->
    <!-- <Footer class="footer"/> -->
  </div>
</template>
<script>
import Swiper from "swiper";
import VueAwesomeSwiper from "vue-awesome-swiper";
// import style
// import swipeDirective from 'vue-ui-swipe'
// import 'vue-ui-swipe/lib/ui-swiper.css'
import "swiper/css/swiper.css";
import Footer from "@/components/footer/footer";
import Gonggao from "@/components/lunbo/lunbo";
export default {
  name: "App",
  data() {
    return {
      swipers_one: [
        {
          lbUrl:'src/assets/images/lunbo1.png'
        },
        {
          lbUrl:'src/assets/images/lunbo2.png'
        },
        {
          lbUrl:'src/assets/images/lunbo3.png'
        }
      ],
      shop: [],
      xinwen:[]
//        swipeInit: {
//         delay: 3500,
//         autoPlay: false,
//         type: Boolean,
// required : true,
// default : true
//       }
    };
  },
  // directives: {
  //   swipe: swipeDirective
  // },
  components: {
    Gonggao
  },
  created() {
    this.$http
      .get("/apv/portal/indexApi/findMobileHomeLb")
      .then((data) => {
        // console.log(data)
        this.swipers_one = data.data;
      });
    this.$http.get("/apv/portal/indexApi/getAllMenu").then(data => {
      // console.log(data.data);
      this.shop = data.data;
    });
      this.$http.get("http://192.168.1.116:8080/portal/indexApi/getNews").then((d)=>{
      this.xinwen=d.data 
      // console.log(d.data)   
   }).catch((err)=>{
     console.log(err)
   })
  },
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
       pagination: {
              el: '.swiper-pagination',
              loop:true
            },

      // autoplay: 3000,
      autoplay: {
        disableOnInteraction: false, //手动滑动之后不打断播放
        delay: 3000
      },
      slidesPerView: "auto",
      centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左。
      loop : true //复制多份循环(这里就是让轮播看起来是循环的，去掉这个就恢复了默认的swiper轮播
    });
  }
  // mounted: function () {
  //   setTimeout(() => {
  //     this.$set(this, 'swipers')
  //   }, 10)
  // }

};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*  头部 */
#index {
  width: 100%;
}
.hd {
  width: 100%;
  height: 0.9rem;
  position: absolute;
    z-index: 99;
}
.hdimg{
  width:100%;
  height:0.9rem;
  position:absolute;
  top:0;
  left:0;
}
.sousuob {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 5%;
  top: 30%;
}
.sousuob img {
  width: 100%;
  height: 100%;
}

.ipt {
  width: 80%;
  height: 0.6rem;
  background: white;
  border-radius: 30px;
  margin-left: 5%;
  position: absolute;
  left: 0px;
  top: 10px;
}

.spa {
  display: inline-block;
  width: 85px;
  height: 60px;
  line-height: 50px;
}
.ipt img {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 3%;
  top: 28%;
}

.ipt input {
  display: inline-block;
  background: none;
  border: none;
  outline: none;
  height: 0.6rem;
  line-height: 0.2rem;
  font-size: .30rem;
  margin-left: 0.4rem;
}

/* 公告 */

.goga {
  width: 100%;
  margin: 0 auto;
  height: 3rem;
}
.gg {
  width: 90%;
  height: 30px;
  margin-top: 0.2rem;
  background: white;
  border-radius: 25px;
  margin: 0.1rem auto;
}
.gg img {
  height: 60%;
  margin-top: 0.1rem;
  margin-left: 0.3rem;
}
.gg_p {
  display: inline-block;
  height: 100%;
  margin-left: 5px;
  vertical-align: top;
  line-height: 30px;
}
/* 列表 */
.yd {
  width: 100%;
  height: 0.1rem;
  position: relative;
  background: #fff;
}
.ziliebiao2 {
  margin-top: 0.1rem;
}
.h1 {
  height: 0.5rem;
  background: #fff;
  font-size: 0.3rem;
  margin-top: 0.1rem;
  padding-left: 0.2rem;
  padding-top:.1rem;
  line-height: 0.5rem;
  display: block;
  font-weight: 900;
  
}

.liebiao {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: white;
}
.ziliebiao {
  width: 25%;
  display: block;
  text-align: center;
  width: 25%;
  height: 50%;
  display: block;
  margin-top: 0.3rem;
  text-align: center;
}
.ziliebiao img {
  width: 50%;
  height: 55%;
  margin: 0 auto;
  display: block;
  margin-bottom: .1rem;
}
.ziliebiao span {
  text-align: center;
  color: #646262;
}
/* .ziliebiao-more{
  width: 25%;
  height: 50%;
  display: block;
  margin-top: 0.3rem;
  text-align: center;
} */

.liebiao {
  width: 100%;
  padding-top: 0.3rem;
  padding-bottom: 0.2rem;
  display: block;
  display: flex;
  flex-wrap: wrap;
  background: white;
}
/* 新闻 */
.hh1 {
  font-weight: 900;
  margin-top: 0.1rem;
  margin-left: 0.2rem;
  padding-top: 0.2rem;
  color: #000;
  font-size: 0.3rem;
}
.xw {
  width: 80%;
  height: 0.01rem;
  margin-left: 0.4rem;
  margin-top: 0.1rem;
  background: #d0d0d0;
}
.xw_img {
  width: 140px;
  height: 87px;
  float: left;
}
.xinwen {
  width: 90%;
  height: 1rem;
  margin: 0.1rem auto;
  margin-top: 0.6rem;
  line-height: 1rem;
  position: relative;
  background: white;
}
.xixiw {
  margin-top: 0.2rem;
}
.xinwen img {
  margin-right: 0.2rem;
  width: 23%;
  height: 80%;
}
.xw_sp {
  float: right;
}
.xw_h2 {
  width: 70%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: -20px;
  font-size: 0.22rem;
  color: #4f4f4f;
}
.xw_p {
  display: inline-block;
  position: absolute;
  top: 0.05rem;
  font-size: 0.14rem;
  color: #bebebe;
}
.xw_p2 {
  display: inline-block;
  position: absolute;
  left: 3rem;
  top: 0.05rem;
  font-size: 0.12rem;
  color: #bebebe;
}
.xxww {
  background: white;
}

/* 轮播 */
.lunhd{
  width:100%;
  height:25%;
  position: absolute;
  top:0;
}
.lunhd img{
  width:100%;
  height:100%;
}
.lunhde{
  width:100%;
  height:75%;
  position: absolute;
  bottom:0;
}
.lunhde img{
  width:100%;
  height:100%;
}
.swiper{
     width:100%;
}
 .swiper img{
     width:100%;
     height:100%;
}

 .swiper-container .swiper-wrapper .swiper-slide {
     width: 100%;
     height: 3.689655172413793rem;
}
 .swiper-container .swiper-wrapper .swiper-slide img {
     width: 100%;
     height: 2.7586206896551726rem;
}
 .swiper-container .swiper-wrapper .swiper-slide-prev img {
     height:2.8rem;
     margin-right: -0.8620689655172413rem;
}
 .swiper-container .swiper-wrapper .swiper-slide-prev {
     height: 3.689655172413793rem;
}
 .swiper-container .swiper-wrapper .swiper-slide-next {
     height: 3.689655172413793rem;
}
 .swiper-container .swiper-wrapper .swiper-slide-next img {
     height: 2.8rem;
}
 .swiper-container {
     width: 100%;
     height: 100%;
}
 .swiper-slide {
     text-align: center;
     font-size: 0.3103448275862069rem;
     background: #fff;
    /* Center slide text vertically */
     display: flex;
     justify-content: center;
     align-items: center;
}


   .swiper-container {
      width: 100%;
      height: 100%;
    }
 

</style>
